<script>
  import { onMount, onDestroy } from 'svelte'

  let count = 0
  const link = 'https://github.com/guocaoyi/create-chrome-ext'

  const minus = () => {
    if (count > 0) count--
    chrome.storage.sync.set({ count })
  }
  const add = () => {
    count++
    chrome.storage.sync.set({ count })
  }

  onMount(() => {
    chrome.storage.sync.get(['count'], (result) => {
      count = result.count ?? 0
    })

    return () => {
      chrome.storage.sync.set({ count })
    }
  })

  $: {
    chrome.runtime.sendMessage({ type: 'COUNT', count })
  }
</script>

<template>
  <main>
    <h3>Popup Page</h3>

    <div class="calc">
      <button disabled={count <= 0} on:click={minus}>-</button>
      <label for="count-input">{count}</label>
      <button on:click={add}>+</button>
    </div>

    <a href={link} target="_blank"> generated by create-chrome-ext </a>
  </main>
</template>

<style>
  :global(:root) {
    font-family:
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      'Segoe UI',
      Roboto,
      Oxygen,
      Ubuntu,
      Cantarell,
      'Open Sans',
      'Helvetica Neue',
      sans-serif;

    color-scheme: light dark;
    background-color: #242424;
  }

  @media (prefers-color-scheme: light) {
    :global(:root) {
      background-color: #fafafa;
    }

    a:hover {
      color: #ff3e00;
    }
  }

  :global(body) {
    min-width: 20rem;
    margin: 0;
  }

  @media (prefers-color-scheme: light) {
    :global(:root) {
      background-color: #fafafa;
    }

    a:hover {
      color: #ff3e00;
    }
  }

  :global(body) {
    min-width: 20rem;
    margin: 0;
  }

  main {
    text-align: center;
    padding: 1em;
    margin: 0 auto;
  }

  h3 {
    color: #ff3e00;
    text-transform: uppercase;
    font-size: 1.5rem;
    font-weight: 200;
    line-height: 1.2rem;
    margin: 2rem auto;
  }

  .calc {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2rem;

    & > button {
      font-size: 1rem;
      padding: 0.5rem 1rem;
      border: 1px solid #ff3e00;
      border-radius: 0.25rem;
      background-color: transparent;
      color: #ff3e00;
      cursor: pointer;
      outline: none;

      width: 3rem;
      margin: 0 a;
    }

    & > label {
      font-size: 1.5rem;
      margin: 0 1rem;
    }
  }

  a {
    font-size: 0.5rem;
    margin: 0.5rem;
    color: #cccccc;
    text-decoration: none;
  }
</style>
